<template>
  <div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
      <li
        class="mui-table-view-cell"
        v-for="item in goods"
        :key="item.goods_id"
        @click="addgoods(item.goods_id)"
      >
        <div class="mui-table">
          <div class="mui-table-cell mui-col-xs-10">
            <h4 class="mui-ellipsis">{{ item.goods_name }}</h4>
            <h5>价格：{{ item.goods_price }}</h5>
            <p class="mui-h6 mui-ellipsis">商品重量 {{ item.goods_weight }}</p>
          </div>
          <div class="mui-table-cell mui-col-xs-2 mui-text-right">
            <span class="mui-h5">{{ item.add_time | dataFormat }}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 分页框 -->
    <van-pagination
      v-model="goodsinfo.pagenum"
      :total-items="goodsinfo.pagesize"
      :items-per-page="5"
      @change="changepage"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data() {
    return {
      goods: [],
      datalist: [],
      goodsinfo: {
        query: '',
        pagenum: 1,
        pagesize: 20
      }
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    async getlist() {
      // 获取商品列表
      const { data: res } = await this.$http.get('goods', {
        params: this.goodsinfo
      })
      if (res.meta.status !== 200) {
        return Toast('商品列表获取失败')
      }
      this.datalist = res.data
      this.goods = res.data.goods
      console.log(res.data)
    },
    // 监听页码值
    changepage(newpage) {
      // console.log(newpage)
      this.goodsinfo.pagenum = newpage
      this.getlist()
    },
    // 点击不同的商品对应不同详情
    async addgoods(id) {
      // 根据id  查询对应的商品
      const { data: res } = await this.$http.get(`goods/${id}`)
      console.log(res)
      if (res.meta.status !== 200) {
        return Toast('查询id失败')
      }
      // window.sessionStorage.setItem('list', id)
      this.$store.commit('increment', id)
      // 路由跳转
      this.$router.push(`/login/images/1/${id}`)
    }
  }
}
</script>

<style lang="less" scoped></style>
